<template>
  <div class="mainbox" :class="{over:showsongdetail}">
    <div class="content">
      <div class="left">
        <List :choosed="topName"></List>
      </div>
      <div class="right">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
      <keep-alive>
        <transition
          enter-active-class="animated zoomIn"
          leave-active-class="animated zoomOut"
        >
          <SongDetails v-if="showsongdetail" />
        </transition>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import List from "./list";
import SongDetails from "./SongDetails";
import { mapState } from "vuex";
export default {
  components: {
    List,
    SongDetails,
  },
  computed: {
    topName: function() {
      let path = this.$route.path;
      path = path.substr(1);
      path = path.substr(0, path.indexOf("/"));
      if (path === "playlist") {
        path = this.$route.params.id;
      } 
      return path;
    },
    ...mapState(["showsongdetail"]),
  },
};
</script>
<style lang="less" scoped>
.mainbox {
  .content {
    height: 570px;
    width: 100%;
    
    .left {
      width: 20%;
      height: 100%;
      float: left;
    }
    .right {
      width: 80%;
      height: 100%;
      float: right;
      overflow: auto;
      height: inherit;
    }
  }
}
.over{
  overflow:auto;
}
</style>
